<template>
  <div>
    <!-- 实训教师管理 -->
    <el-container style="background-color: #fff">
      <el-header>
        <div class="box">
          <div class="left">
            <el-input
              v-model="input"
              placeholder="请输入姓名或人员编号"
            ></el-input
            ><el-button
              type="primary"
              style="margin-left: 10px"
              icon="el-icon-search"
              >查询</el-button
            ><el-button icon="el-icon-refresh-right">重置</el-button>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-circle-plus-outline"
              >新建</el-button
            >
          </div>
        </div></el-header
      >
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          stripe="true"
          :default-sort="{ prop: 'date', order: 'descending' }"
          @selection-change="handleSelectionChange"
           :header-cell-style="{
            'font-weight': '600',
            color: '#666',
            'font-size': '14px',
            'text-align': 'center',
          }"
        >
          >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="人员编号"
            align="center"
            style="font-weight: 600"
            sortable
            width="120"
          >
            <template slot-scope="scope">{{ scope.row.bh }}</template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="phone" align="center" label="联系电话" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="emlie" align="center" label="电子邮件" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="zw" align="center" label="职务" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="fjh" align="center" label="分机号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="dw" align="center" label="所属单位" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="dibu">
          <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">选择全部</el-button>
            <el-button @click="toggleSelection()">反向选择</el-button>
            <el-button @click="toggleSelection()">清除选择</el-button>
            <el-button @click="toggleSelection()">删除选择</el-button>
            <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
            >切换第二、第三行的选中状态</el-button
          > -->
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="1000"
            style="margin-top: 20px"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="操作确认"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>删除操作确认</span>
      <p>确定要删除当前管理员吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["showFileName"],
  data() {
    return {
      input: "",
      dialogVisible: false,
      tableData: [
        {
          name: "王小虎",
          dw: "合肥学院",
          fjh: "003",
          zw: "经理",
          emlie: "XS000001@hfzjjt.com",
          phone: "13531314569",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          dw: "合肥学院",
          fjh: "003",
          zw: "经理",
          emlie: "XS000001@hfzjjt.com",
          phone: "13531314569",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          dw: "合肥学院",
          fjh: "003",
          zw: "经理",
          emlie: "XS000001@hfzjjt.com",
          phone: "13531314569",
          bh: "XS000001",
        },
        {
          name: "王小虎",
          dw: "合肥学院",
          fjh: "003",
          zw: "经理",
          emlie: "XS000001@hfzjjt.com",
          phone: "13531314569",
          bh: "XS000001",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible=true
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style scoped >
.box,
.left {
  display: flex;
  justify-content: space-between;
}
.box {
  margin: 20px 10px;
}
.dibu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>